<template>
	<view>
		<tui-tabbar :current="current" :color="color" :selectedColor="selectedColor" :backgroundColor="backgroundColor" :hump="hump" :iconSize="iconSize" :isFixed="isFixed" :tabBar="tabBar" :badgeColor="badgeColor" :badgeBgColor="badgeBgColor" :unlined="unlined" :backdropFilter="backdropFilter" :zIndex="zIndex" @click="tabbarSwitch"></tui-tabbar>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 0,
			},
			cartNum: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				color: '#666', //字体颜色
				selectedColor: '#5677FC', //字体选中颜色
				backgroundColor: '#FFFFFF', //背景颜色
				hump: false, //是否需要中间凸起按钮
				iconSize: 52, //字体图标大小，单位rpx
				isFixed: true, //是否固定在底部
				tabBar: [], //tabbar列表
				badgeColor: '#fff', //角标字体颜色
				badgeBgColor: '#E90117', //角标背景颜色
				unlined: false, //去掉顶部细线
				backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]
				zIndex: 9999, //z-index值，isFixed为true时生效
				appInit: {},
			};
		},
		created() {
			let that = this;
			that.initialize();
		},
		watch: {
			cartNum(val, oldVal) {
				let that = this;
				that.cartNum = val;
				that.$forceUpdate();
			},
		},
		methods: {
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.appInit = that.tui.getCache("appInit");
					if (typeof(that.appInit) === 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			__init() {
				let that = this;
				console.log('tab-bar:appInit=>', that.appInit.tabBar, that.cartNum);
				for (let key in that.appInit.tabBar) {
					that[key] = that.appInit.tabBar[key];
				}
				if (typeof that.tabBar[2] !== 'undefined') {
					that.tabBar[2].num = that.cartNum;
				}
			},
			tabbarSwitch(e) {
				let that = this;
				that.tui.urlBlank(e.pagePath);
			},
		}

	}
</script>

<style lang="scss">
</style>